﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>7</title>

		<script src="https://unpkg.com/vue"></script>

    </head>
    <body class="docs">
	
	<br /><br />组件化应用构建<br /><br />
介绍 — Vue.js<br /><br />
https://cn.vuejs.org/v2/guide/index.html<br /><br />

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:propself="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

    </body>

<script type="text/javascript">
<!--

Vue.component('todo-item', {
  props: ['propself'],
  template: "<li v-bind:id='propself.id'>{{ propself.text }}</li>"
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})


</script>

</html>
